import React, {PropTypes, Component} from 'react';
import {message,Layout,Breadcrumb, Icon,Tooltip,Popconfirm} from 'antd';
const {Header, Content, Footer, Sider} = Layout;
import NProgress from 'nprogress';
import {HeadMenu,LeftMenu} from './menu';
import logo from 'images/logo.jpg';
import './style.less';
import API,{CLEAR_CACHE} from "../../lib/api";
import {inRoute} from "../../lib/utils";



export default class Common extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            logoClass: 'logo',
            inRoute:false,
        };

    }


    componentDidMount(){

        if(inRoute()){
            this.setState({
                inRoute:true
            })
        }


    }


    toggle() {
        this.setState({
            collapsed: !this.state.collapsed,
            logoClass: this.state.collapsed ? 'logo' : 'minilogo'
        });
    }

    handleClear(){

        API.fetch( CLEAR_CACHE ,{} , resp =>{
            message.success("清除成功")
        })

    }


    render() {

        const {inRoute} = this.state;

        if(inRoute){
            return this.props.children;
        }else{
            return (
                <Layout style={{minHeight: '100vh'}}>

                    <Sider
                        trigger={null}
                        collapsible
                        collapsed={this.state.collapsed}
                    >
                        {/* 头像 */}
                        <div className={this.state.logoClass}>
                            <img src={logo}/>
                        </div>

                        {/* 菜单栏 */}
                        <LeftMenu  />

                    </Sider>

                    <Layout>

                        {/* 头部 */}
                        <Header  className="header" style={{background: '#fff', padding: 0}}>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                onClick={this.toggle.bind(this)}
                            />

                            <div className="rightWarpper">

                                {/* 待处理事项 */}

                                <Popconfirm
                                    placement="bottom"
                                    title="确定要清除缓存吗?"
                                    onConfirm={this.handleClear.bind(this)}
                                    okText="清除"
                                    cancelText="取消"
                                >
                                    <Tooltip placement="left" title="清除缓存">
                                        <div className="button" >
                                                <Icon type="rocket" />
                                        </div>
                                    </Tooltip>

                                </Popconfirm>



                                {/* 个人头部菜单 */}
                                <HeadMenu/>

                            </div>

                        </Header>

                        {/*  内容 */}
                        {this.props.children}


                    </Layout>
                </Layout>
            )
        }


    }

}